$dps-color: #ed5653;
$threat-color: #b56d07;
$health-color: #22ba00;
$mana-color: #2E93fA;
$energy-color: #ffd700;
$rage-color: #ff0000;
$focus-color: #cd853f;
$combo-points-color: #ffa07a;

.threat .series-color, .threat.series-color {
	color: $threat-color;
}
.health .series-color, .health.series-color {
	color: $health-color;
}
.mana .series-color, .mana.series-color {
	color: $mana-color;
}
.energy .series-color, .energy.series-color {
	color: $energy-color;
}
.rage .series-color, .rage.series-color {
	color: $rage-color;
}
.focus .series-color, .focus.series-color {
	color: $focus-color;
}
.combo-points .series-color, .combo-points.series-color {
	color: $combo-points-color;
}

.timeline-root {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.timeline-disclaimer {
	display: flex;
	align-items: flex-start;

	.timeline-chart-picker {
		width: 8rem;
		margin-left: auto;
	}
}

.timeline-warning {
	margin-right: map-get($spacers, 2);
}

.timeline-plots-container {
	flex-grow: 1;
}

.timeline-plot > div {
	margin: auto;
}

// The timeline is generated by ApexCharts which sets height manually. In order to scale it properly, we need to apply several
// height: 100% attributes on these containers
.timeline-content {
	height: 100%;

	.dr-row {
		height: 100%;
		padding: 0;

		.timeline {
			height: 100%;
		}
	}
}

.timeline-tooltip {
	background-color: #333;
	border: none;
	color: white;
	padding: 3px;
}

.timeline-tooltip-header {
	border-bottom: 1px solid white;
	margin-bottom: 5px;
}

.timeline-tooltip-body-row {
	display: flex;
	align-items: center;
}

.timeline-tooltip-icon {
	width: 20px;
	height: 20px;
}

.timeline-tooltip ul { // Remove default bullets
	list-style: none;
	padding-left: 1em;
}
.timeline-tooltip ul li::before { // Add our own bullets (so we can have separate color).
	content: "\2022";
	font-weight: bold;
	font-size: 16px;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}
.timeline-tooltip.dps ul li::before {
	color: $dps-color;
}
.timeline-tooltip.threat ul li::before {
	color: $threat-color;
}
.timeline-tooltip.health ul li::before {
	color: $health-color;
}
.timeline-tooltip.mana ul li::before {
	color: $mana-color;
}
.timeline-tooltip.energy ul li::before {
	color: $energy-color;
}
.timeline-tooltip.rage ul li::before {
	color: $rage-color;
}
.timeline-tooltip.focus ul li::before {
	color: $focus-color;
}
.timeline-tooltip.combo-points ul li::before {
	color: $combo-points-color;
}

.series-color {
	font-weight: bold;
}

.timeline-tooltip-auras {
	border-top: 1px solid white;
	margin-top: 5px;
}
.timeline-tooltip-auras ul li::before {
	color: white;
}

.rotation-container {
	color: white;
	display: flex;
}
.rotation-hidden-ids {
	margin: 10px !important;
}
.rotation-row {
	height: 28px;
	margin: .25rem;
}
.rotation-labels {
	display: inline-block;
	white-space: nowrap;
}
.rotation-label {
	font-size: 13px;
	font-weight: bold;
	display: flex;
	align-items: center;
	color: white;
}
.rotation-label .fas {
	margin: 1px;
	cursor: pointer;
	color: #ffefd5;
}
.rotation-label .fas:hover {
	color: yellow;
}
.rotation-label-hidden {
	display: inline-flex;
	border: 1px solid white;
	margin: 3px;
}
.rotation-label-icon {
	@include wowhead-background-icon;
	height: 24px;
	width: 24px;
	margin: 2px;
}
.rotation-label-text {
	margin: 2px;
}
.rotation-label-header, .rotation-timeline-header {
	height: 30px;
}
.rotation-timeline {
	display: inline-block;
	overflow-x: scroll;
}
.rotation-timeline-row {
	position: relative;
	border-bottom: 1px solid grey;
}
.rotation-timeline-resource {
	position: absolute;
	height: 100%;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	display: flex;
	align-items: center;
	font-weight: bold;
	overflow-x: hidden;
}
.rotation-timeline-resource-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: yellow;
}
.rotation-timeline-cast {
	position: absolute;
	background-color: #e5cc80;
	z-index: 1;
	display: flex;
}
.rotation-timeline-travel-time {
	position: absolute;
	height: 24px;
	background-color: #f9c0ff;
}
.rotation-timeline-tick {
	position: absolute;
	width: 5px;
	background-color: maroon;
	height: 20px;
	top: 2px;
	z-index: 2;
}
.rotation-timeline-aura {
	position: absolute;
	background-color: blue;
	opacity: 0.5;
	height: 20px;
	top: 2px;
}
.rotation-timeline-stacks-change {
	position: absolute;
	height: 20px;
	background-color: transparent;

	border-left: 1px solid grey;
	border-right: 1px solid grey;
	display: flex;
	align-items: center;
	font-weight: bold;
	overflow-x: hidden;
}
.rotation-timeline-separator {
	width: 100%;
	border: 1px solid white;
	margin: 10px 0;
}
.rotation-timeline-cast-icon {
	@include wowhead-background-icon;
	height: 24px;
	width: 24px;
	border: 1px solid grey;
}
.rotation-timeline-cast.outcome-miss .rotation-timeline-cast-icon {
	border-color: red;
}
.rotation-timeline-cast.outcome-partial .rotation-timeline-cast-icon {
	border-color: yellow;
}
.rotation-timeline-cast.outcome-hit .rotation-timeline-cast-icon {
	border-color: green;
}
.rotation-timeline-cast.outcome-crit .rotation-timeline-cast-icon {
	border-color: blue;
}
